<template>
  <!-- 菜单按钮开关管理 -->
  <a-tree
    v-model="checkedKeys"
    defaultExpandAll
    :defaultExpandedKeys="expandedKeys"
    :selected-keys="selectedKeys"
    :tree-data="treeInfo"
    :replace-fields="replaceFields"
    @expand="onExpand"
    @select="onSelect"
  />
</template>
<script>
export default {
  data() {
    return {
      autoExpandParent: true,
      defaultExpandAll: true,
      checkedKeys: [],
      selectedKeys: [],
      treeInfo: [],
      IsEnabled: 1,
      replaceFields: {
        children: 'sysMenu',
        key: 'MenuId',
        title: 'MenuName',
      },
      expandedKeys: [],
    }
  },
  props: {
    treeData: {
      default: () => [],
      type: Array,
    },
  },
  watch: {
    treeData(val) {
      console.log('treeData :>> ', val)
      this.treeInfo = this.treeData
      this.$nextTick(() => {
        this.treeInfo.map((item) => {
          this.expandedKeys.push(item.MenuId)
        })
      })
      console.log('this.expandedKeys :>> ', this.expandedKeys)
    },
    checkedKeys() {
      console.log(' checkedKeys:>> ', this.checkedKeys)
      this.$emit('roleAuthCheckKeys', this.checkedKeys)
    },
    selectedKeys() {
      // console.log(' selectedKeys:>> ', this.selectedKeys)
    },
  },
  mounted() {
    this.treeInfo = this.treeData
    this.$nextTick(() => {
      this.expandedKeys = []
      this.treeInfo.map((item) => {
        this.expandedKeys.push(item.MenuId)
      })
    })
  },
  methods: {
    onExpand(expandedKeys) {},
    onCheck(checkedKeys) {
      console.log('onCheck', checkedKeys)
      this.checkedKeys = checkedKeys
    },
    onSelect(selectedKeys, info) {
      console.log('onSelect', selectedKeys, info)
      this.selectedKeys = selectedKeys
      this.$emit('selectedKeyInfo', info)
    },
  },
}
</script>
<style lang="less" scoped>
.ant-tree {
  font-size: 20px;
}
</style>